<script lang="ts">
// 请购记录信息
export default {
  name: "purchasePage"
};
</script>
<script setup lang="ts">
import { reactive, nextTick, onMounted } from "vue";
import { VXETable } from "vxe-table";
import { changeHeight } from "/@/utils/public.mixin";
import { queryBuyingRequisitionPage, deletePr } from "/@/api/prm/purchase";
import { errorMessage, successMessage } from "/@/utils/message";
import { useRoute } from "vue-router";
import { dateFormatYMD } from "/@/utils/date";
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});
const table = reactive({
  loading: false,
  tableData: [] as any[],
  tableHeight: 0, //表格高度
  listQuery: {
    brName: "",
    demandType: "",
    date: "" as any,
    mesNo: "",
    pr: "PR3"
  }
});
// 查询
const searchEvent = () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  if (table.listQuery.date) {
    data.startTime = dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endTime = dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startTime = "";
    data.endTime = "";
  }
  delete data.date;
  table.loading = true;
  queryBuyingRequisitionPage(data)
    .then((res: any) => {
      if (res.code === 0) {
        table.tableData = res.data.list;
        page.totalResult = res.data.total;
      }
      table.loading = false;
    })
    .catch(() => {
      errorMessage("查询失败");
      table.loading = false;
    });
};
// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    searchEvent();
    table.tableHeight = changeHeight();
  });
});
// 删除单据
const deleteData = async row => {
  const type = await VXETable.modal.confirm("您确定要删除该数据?");
  if (type === "confirm") {
    deletePr(row.infField0001).then((res: any) => {
      if (res.code === 0) {
        searchEvent();
        successMessage("删除成功");
      } else {
        errorMessage(res.message);
      }
    });
  }
};
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="请购单号" field="mesNo" :item-render="{}">
        <template #default="{ data }">
          <vxe-input
            v-model="data.mesNo"
            placeholder="请输入请购单号"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="请购人名称" field="brName" :item-render="{}">
        <template #default="{ data }">
          <vxe-input
            v-model="data.brName"
            placeholder="请输入请购人名称"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="需求分类" field="demandType" :item-render="{}">
        <template #default="{ data }">
          <vxe-input
            v-model="data.demandType"
            placeholder="请输入需求分类"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="制单日期" field="date">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.date"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            status="primary"
            icon="fa fa-search"
            v-auth="routeName + ':search'"
            @click="searchEvent"
            >查询</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-table
      ref="xTable"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column
        field="infField0001"
        title="请购单号"
        min-width="150"
      ></vxe-column>
      <vxe-column
        field="infField0003"
        title="日期"
        min-width="110"
      ></vxe-column>
      <vxe-column
        field="infField0004"
        title="部门编码"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="infField0005"
        title="部门名称"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="infField0007"
        title="请购人名称"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="field0001"
        title="需求分类"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="field0002"
        title="客户编码"
        min-width="180"
      ></vxe-column>
      <vxe-column field="field0003" title="料号" min-width="130"></vxe-column>
      <vxe-column
        field="field0004"
        title="需求数量"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="field0005"
        title="交货日期"
        min-width="110"
      ></vxe-column>
      <vxe-column field="field0006" title="长度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.field0006
          }}{{
            row.field0006 && row.field0007 ? "(" + row.field0007 + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="field0008" title="宽度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.field0008
          }}{{
            row.field0008 && row.field0009 ? "(" + row.field0009 + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="field0010" title="厚度/高度(单位)" min-width="140">
        <template #default="{ row }">
          {{ row.field0010
          }}{{
            row.field0010 && row.field0011 ? "(" + row.field0011 + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column
        field="field0012"
        title="加工产品"
        min-width="100"
      ></vxe-column>
      <vxe-column title="操作" width="90" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-trash-o"
            v-auth="routeName + ':delete'"
            @click="deleteData(row)"
            >删除</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      :current-page="page.pageNum"
      :page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

// .vxe-button.type--button:not(.is--round) {
//   border-radius: 0;
// }

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body),
:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content) {
  overflow: inherit;
}
#insertForm .el-date-editor.el-input__inner,
#insertForm .el-form-item :deep(.el-date-editor.el-input),
#insertForm .el-select {
  width: 100% !important;
}
</style>
